<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.5.3/vue-router.js"></script>
    <style>
      .router-link-exact-active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>Hello App!</h1>
      <p>
        <router-link to="/">Go to Home</router-link> |
        <router-link to="/about">Go to About</router-link> |
        <router-link to="/456">Go to 456</router-link> |
        <router-link to="/456?name=123">Go to 456?123</router-link> |
        <router-link to="/456?name=789">Go to 456?789</router-link> |
      </p>

      <hr />
      <router-view></router-view>
    </div>
    <script>
      const Home = { template: "<div>Home</div>" };
      const About = { template: "<div>About</div>" };
      const Test = {
        template: "<div>{{query}}</div>",
        data: function () {
          return {
            query: "",
          };
        },
        // 组件内的守卫
        beforeRouteEnter(to, from, next) {
          // 在渲染该组件的对应路由被 confirm 前调用
          // 不！能！获取组件实例 `this`
          // 因为当守卫执行前，组件实例还没被创建
          console.log(to.query, from);
          next(function (vm) {
            vm.query = to.query;
          });
          // 回调函数会在this创建之后调用 并且把 this当成vm的实参
        },
        beforeRouteUpdate(to, from, next) {
          // 在当前路由改变，但是该组件被复用时调用
          // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
          // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
          // 可以访问组件实例 `this`
          console.log(to.query);
          this.query = to.query;
          next();
        },
        beforeRouteLeave(to, from, next) {
          // 导航离开该组件的对应路由时调用
          // 可以访问组件实例 `this`
          console.log("离开/456");
          next();
        },
      };

      const router = new VueRouter({
        mode: "hash",
        routes: [
          { path: "/", component: Home },
          { path: "/about", component: About },
          {
            path: "/456",
            component: Test,
            // 路由独享的守卫
            // beforeEnter: function (to, from, next) {
            //   console.log(to, from);
            //   next();
            // },
          },
        ],
      });

      // 全局前置守卫
      // 每一路由 进入的时候 都要做什么 相当于做了拦截
      // to 即将要进入的目标 路由对象
      // from 当前导航正要离开的路由
      // router.beforeEach((to, from, next) => {
      //   // ...
      //   // 拦截之后的操作
      //   console.log(to, from);

      //   // 操作完成之后  继续放行 next方法
      //   next();
      // });
      // router.afterEach((to, from) => {
      //   console.log("router.afterEach");
      // });

      const app = new Vue({
        el: "#app",
        router: router,
      });
    </script>

    <!-- 

全局
beforeEach
beforeResolve
afterEach

路由独享
beforeEnter

组件内部
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave


假设需求是 从 about 页面 跳转至  order订单页面（需要登陆） login页面

已经登陆
1 about
2 order

未登录
1 about  => order/address

order 组件或者路由配置 进入之前拦截 判断是否登录 没有登陆 跳转到 login 

检测到 => order需要登录 需要跳转到 login 携带本应该去到的也页面参数
2 login => 登陆成功 转到 order/address页面

3 order




 -->
  </body>
</html>
